<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Along</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <script include="" src="./static/libs/include-lib-local.js"></script>
  <script include="turf" src="./static/libs/include-leaflet-local.js"></script>

  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = L.map('map');
    var geojson;

    var origin = [89.341, 30.92];
    var destination = [133.989, 30.92];

    var startPoint = [];
    var endPoint = [];
    var route = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            origin,
            destination
          ]
        }
      }]
    };
    var simpleLine = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "geometry": {
          "type": "LineString",
          "coordinates": [
            origin,
            destination
          ]
        }
      }]
    };


    initMap();
    alongLine();
    updateView();

    function initMap() {
      var layer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' +
        'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw', {
          attribution: '<a href="#">MapGIS</a>',
          maxZoom: 18,
          id: 'mapbox.light'
        });
      layer.addTo(map);
      map.setView([30.92, 116.35], 4);
    }

    function alongLine() {
      var lineDistance = turf.distance(origin, destination, {
        units: 'kilometers'
      });

      var arc = [];
      var count = 100; //插入100个点
      var clip = lineDistance / count; //用于下面的循环

      for (var i = 0; i < lineDistance; i += clip) {
        //计算对应第i个插值点的位置
        var segment = turf.along(route.features[0], i, {
          units: 'kilometers'
        });
        //将插值点加入到原始数据中
        arc.push(segment.geometry.coordinates);
      }
      arc.push(destination); //补上终点
      //更新数据
      route.features[0].geometry.coordinates = arc;
    }

    function updateView() {
      L.geoJson(simpleLine).addTo(map);
      L.geoJson(route).addTo(map);
    }
  </script>
</body>

</html>